<template>
  <div class="bg-gray">
    <b-container>
      <b-row>
        <b-col>
          <b-breadcrumb class="bg-gray bread-border">
            <b-breadcrumb-item to="/space">
              <b-icon icon="house-fill" scale="1.25" shift-v="1.25"/>
              个人空间
            </b-breadcrumb-item>
            <b-breadcrumb-item to="/orders/buy" active>
              <b-icon icon="list-ul" scale="1.25" shift-v="-1.25"/>
              订单列表
            </b-breadcrumb-item>
            <b-breadcrumb-item :active="status" @click="switchstatus(true)">买到的</b-breadcrumb-item>
            <b-breadcrumb-item :active="!status" @click="switchstatus(false)">卖出的</b-breadcrumb-item>
          </b-breadcrumb>
        </b-col>
      </b-row>
      <b-row>
        <order-item
            v-for="(order,index) in orders"
            :item="items[index]"
            :order="order"
            :user="users[index]"
            :side="status"
            @refresh="load"
        >

        </order-item>
      </b-row>
    </b-container>
  </div>
</template>

<script>
  import OrderItem from "../components/OrderItem";

  export default {
    name: "Orders",
    components: {OrderItem},
    data() {
      return {
        // true -> show buys
        status: true,
        items: [],
        users: [],
        orders: [],
        request: true
      }
    },
    methods: {
      makeToast(msg, res = true) {
        this.$bvToast.toast(msg, {
          title: res ? '操作成功!' : '操作失败！',
          variant: res ? 'primary' : 'danger',
          solid: true,
          autoHideDelay: 5000,
        })
      },
      switchstatus(s) {
        this.status = s
        this.$router.replace(s ? '/orders/buy' : '/orders/sell')
        this.items = []
        this.users = []
        this.orders = []
        this.load()

      },
      load() {
        this.$ajax.post('/order/getOrders', {
            uuid: this.$store.state.uuid,
            side: this.status ? 'buy' : 'sell'
          }
        ).then(resp => {
          let data = resp.data
          if (data.code === 200) {
            this.items = data.data.items
            this.users = data.data.users
            this.orders = data.data.orders
          } else {
            this.makeToast(data.msg, false)
          }
        }).catch(err => {
          this.make("请求失败", false)
        })
      }
    },
    mounted() {
      this.status = this.$route.params.status === 'buy';
      //get buy data
      this.load()
    }
  }
</script>

<style scoped>

</style>